<template>
  <div class="my-container">
    <!-- 面包屑导航 -->
    <BreadCrumb :info="info" />
    <!-- 功能区 -->
    <div class="function-area">
      <!-- 左侧菜单栏 -->
      <MenuBar class="left" />
      <!-- 右侧区域 -->
      <router-view class="right" />
    </div>
  </div>
</template>

<script>
import BreadCrumb from '@/components/BreadCrumb'
import MenuBar from '@/components/my/MenuBar'

export default {
  data () {
    return {
      info: [
        { title: '个人中心', link: '' }
      ]
    }
  },

  components: {
    BreadCrumb,
    MenuBar
  }
}
</script>

<style lang="less" scoped>
@import "../styles/variable.less";

.my-container {
  width: 1100px;
  margin: 0px auto;
  padding-bottom: 20px;
  .function-area {
    display: flex;
    .left {
      border: 1px solid @line-color-light2;
      width: 180px;
    }
    .right {
      width: 900px;
      margin-left: 20px;
    }
  }
}
</style>
